<template>
  <div class="Login new-logo">
    <div class="topLine"></div>
    <div class="bottomLine"></div>
    <div class="title">
      <h1>欢迎来到黄河人才网</h1>
      <h2>首次登录将自动注册</h2>
    </div>
    <div class="form">
      <div class="row">
        <input
          type="tel"
          v-model.trim="form.mobile"
          maxlength="11"
          placeholder="输入手机号"
        />
      </div>
      <!-- <div class="row" style="padding:0" id="row">
        <drag-verify
          v-if="width"
          ref="dragVerify"
          radius="0"
          :isPassing.sync="isPassingFlag"
          text="请按住滑块拖动"
          successText="验证通过"
          handlerIcon="van-icon van-icon-arrow"
          successIcon="van-icon van-icon-success"
          :width="width"
        ></drag-verify>
      </div> -->
      <div class="row">
        <input
          type="tel"
          v-model.trim="form.password"
          maxlength="11"
          placeholder="输入验证码"
        />
        <span class="btnCode" :disabled="disabledFlag" @click="getCode">{{
          codeName
        }}</span>
      </div>
      <div class="btn" @click="submit">登录</div>
    </div>
  </div>
</template>

<script>
import { getSmsCode, getSmsCodeToken, resumeList } from "@/api/api";
import dragVerify from "vue-drag-verify2";
export default {
  //组件注入
  components: { dragVerify },
  //存放数据
  data() {
    return {
      tel: "",
      isPassingFlag: true,
      back: this.$route.query.back || false,
      width: 0,
      time: 60,
      form: {
        mobile: "", // 手机号
        password: "", // 验证码
        roleType: "0",
        loginMode: 1, // 非密码登录
      },
      disabledFlag: false, // 获取验证码能否点击
      codeName: "获取验证码",
    };
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取验证码
    getCode() {
      if (!this.form.mobile) {
        this.$toast("请输入手机号");
        return false;
      }
      var mobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
      if (!mobile.test(this.form.mobile)) {
        this.$toast("请输入正确的手机号");
        return false;
      }
      if (!this.isPassingFlag) {
        this.$toast("请拖动滑块进行验证");
        return false;
      }
      // 获取验证码token
      getSmsCodeToken({
        phone: this.form.mobile,
      }).then((res) => {
        if (res.code === 200) {
          const token = res.result.token;
          const sign = this.$md5(
            token + this.form.mobile + "EmxJk0VFBgtPfCU5XtZxiVk6rkIGBLwY"
          );
          // 获取验证码接口
          const that = this;
          that.disabledFlag = true;
          const interval = window.setInterval(function () {
            that.codeName = "已发送" + that.time + "s";
            --that.time;
            if (that.time < 0) {
              that.codeName = "重新发送";
              that.time = 60;
              that.disabledFlag = false;
              window.clearInterval(interval);
            }
          }, 1000);
          getSmsCode({
            token: token,
            mobile: this.form.mobile,
            sign: sign,
          }).then((res) => {
            if (res.code === 200) {
              this.$notify({ type: "success", message: "验证码发送成功" });
            } else {
              this.$notify({ type: "danger", message: res.message });
            }
          });
        } else {
          this.$notify({ type: "danger", message: res.message });
        }
      });
    },
    submit() {
      if (!this.form.mobile) {
        this.$toast("请输入手机号");
        return false;
      }
      var mobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
      if (!mobile.test(this.form.mobile)) {
        this.$toast("请输入正确的手机号");
        return false;
      }
      if (!this.isPassingFlag) {
        this.$toast("请拖动滑块进行验证");
        return false;
      }
      if (!this.form.password) {
        this.$toast("请输入验证码");
        return false;
      }
      this.$store
        .dispatch("login", this.form)
        .then(() => {
          if (this.back) {
            this.$router.back();
          } else {
            this.$router.push({ path: "/" });
          }
        })
        .catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.width = document.getElementById("row").clientWidth;
  },
};
</script>
<style lang="scss" scoped>
@import "../styles/mixin.scss";
.Login {
  height: 100vh;
  padding-top: 150px;
  .topLine {
    width: 281px;
    height: 209px;
    background: url("../assets/topLine.png") center no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0;
    top: 0;
  }
  .bottomLine {
    width: 281px;
    height: 209px;
    background: url("../assets/bottomLine.png") center no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .title {
    height: auto;
    overflow: hidden;
    padding: 60px;
    h1 {
      font-size: 48px;
      color: #2d2f31;
      margin-bottom: 20px;
    }
    h2 {
      font-size: 28px;
      color: #999999;
    }
  }
  .form {
    height: auto;
    overflow: hidden;
    padding: 20px 60px;
    .row {
      height: auto;
      overflow: hidden;
      border: 1px solid #eee;
      padding: 0 20px;
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      input {
        height: 88px;
        font-size: 28px;
        color: #bbb;
        flex: 1;
      }
      .btnCode {
        line-height: 88px;
        font-size: 28px;
        color: #e54437;
      }
    }
    .btn {
      font-size: 32px;
      color: #fff;
      text-align: center;
      width: 100%;
      height: 88px;
      line-height: 88px;
      background: #e54437;
      box-shadow: 0px 7px 8px 0px rgba(229, 68, 55, 0.25);
      border-radius: 44px;
      margin-top: 120px;
    }
  }
}
/deep/.drag_verify .dv_handler {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
